<template>
  <div id="app">
    <tutorial-header 
      :show-left-panels="showLeftPanels"
      :show-right-panels="showRightPanels"
      :showGlobalPanels="showGlobalPanels"
    />
    <cv-content id="#main-content">
      <router-view />
    </cv-content>
  </div>
</template>

<script>
import TutorialHeader from "./components/TutorialHeader";
export default {
  components: {
    TutorialHeader
  },
  data(){
    return {
      showLeftPanels:false,
      showRightPanels:true,
      showGlobalPanels:true
    };        
  },
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    // console.log("sessionStorage.getItem",sessionStorage.getItem("store"));
    if (sessionStorage.getItem("store") ) {
      this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
      // console.log("beforeunload",this.$store.state);
      sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }     
};
</script>
<style lang="scss">
@import "./styles/carbon";
</style>
